<template>
  <div>
    <div class="tabs" ref="tabs">
      <div ref="tabUl">
        <div class="tab-list">
          <div class="tab-li" v-for="(item, i) in menulist" :key="i" @click="clickHandle(i)">
            <div>{{item}}</div>
          </div>
        </div>
        <div ref="tabsLine" class="btn-line"></div>
      </div>
    </div>
    <h3>第二章</h3>
    <div class="nav">
      <div class="marker"></div>
      <ul>
        <li class="item" v-for="(nav, i) in navs" :key="i" @click="toggleNav(i)">{{nav}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  data(){
    return {
      initMgLeft:0,
      dtMgLeft:0,
      navs:['home','about','team','contact']
    }
  },
  props:{
    menulist:{
      type: Array,
      default:() =>{
        return ['tab1', 'tab2', 'tab3', 'tab4']
      }
    }
  },
  mounted(){
    let tabs = this.$refs.tabs
    let tabsLine = this.$refs.tabsLine  
    // let tabLi = tabs.clientWidth/this.menulist.length //单个菜单width
    let tabLis = tabs.getElementsByClassName('tab-li')
    let liWidth = tabLis[0].clientWidth
    let mgLeft = (liWidth-tabsLine.clientWidth)/2
    this.initMgLeft = mgLeft  
    tabsLine.style.transform = `translateX(${mgLeft}px)`
    // this.$nextTick(() => {
    //   this._initScroll()
    // })
  },
  methods:{
    clickHandle(i){
      this.active = i
      this.linShow = true
      let tabs = this.$refs.tabs
      let tabsLine = this.$refs.tabsLine  
      let tabLis = tabs.getElementsByClassName('tab-li')
      let liWidth = tabLis[0].clientWidth
      let mgLeft = (liWidth-tabsLine.clientWidth)/2
      this.initMgLeft = mgLeft 
      // console.log(this.initMgLeft);
      this.dtMgLeft =this.initMgLeft+this.initMgLeft*(i*2)+tabsLine.clientWidth*i
      // console.log(this.dtMgLeft);
      
      tabsLine.style.transform = `translateX(${this.dtMgLeft}px)`
      tabsLine.style.transition = "all 1s"
    }, 
     _initScroll () {
      // 动态计算ul的宽度
      const ul = this.$refs.tabUl
      const lis = ul.getElementsByClassName('tab-li')
      const count = lis.length
      const liWidth = lis[0].clientWidth
      ul.style.width = liWidth * count + 'px'
      new BScroll('.tabs', {
        scrollX: true, // 水平滑动
        probeType: 2,
      })
    },
    toggleNav (e) {
      var marker = document.getElementsByClassName('marker')
      var items = document.getElementsByClassName('item')
      console.log(marker[0]);
      
      marker[0].style.left =items[e].offsetLeft + 'px'
      marker[0].style.width = items[e].offsetWidth + 'px'
    }
  }
}
</script>
<style lang='less' scoped>
.tabs {
  width: 375px;
  overflow: hidden;
}
.tabs .tab-list {
  width: 100%;
  display: flex;
}
.tabs .tab-list .tab-li{
  flex: 0 0 22%;
  text-align: center;
  padding: 5px 0;
}
.btn-line{
 height: 2px;
 width: 30px;
 background-color: red;
 animation-name: hd; 
 animation-duration: 1s; 
 animation-iteration-count: 1; 
}
@keyframes hd {
  0%{
    display: hidden; 
  }
  100%{
    display: block;

  }
 
}
//第二章
.nav{
  position: relative;
  display: flex;
  ul{
    display: flex;
    li{
      position: relative;
      margin: 0 10px;
      font-size: 2em;
      color: #000;
    }
  }
  .marker{
    position: absolute;
    left: 0;
    height: 2px;
    width: 0;
    background-color: #000;
    bottom: -8px;
    transition: 0.5s;
    border-radius: 2px;
  }
}
</style>